<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layouts/main-layout :: html(~{::title}, ~{::pageStyles}, '患者管理', ~{::#patients-content}, ~{::pageScripts})}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能医疗诊断助手 - 患者管理</title>
    
    <!-- 页面特定CSS -->
    <th:block th:fragment="pageStyles">
        <link rel="stylesheet" th:href="@{/css/pages/patients.css}">
    </th:block>
</head>
<body>
    <!-- 患者管理内容 -->
    <div id="patients-content">
        <!-- 操作区域 -->
        <div class="actions-bar">
            <button class="btn btn-primary" id="addPatientBtn">
                <span data-icon="plus"></span>
                添加患者
            </button>
            <div class="filters">
                <select id="departmentFilter" class="filter-select">
                    <option value="">所有科室</option>
                    <option value="内科">内科</option>
                    <option value="外科">外科</option>
                    <option value="儿科">儿科</option>
                    <option value="妇产科">妇产科</option>
                    <option value="神经科">神经科</option>
                    <option value="精神科">精神科</option>
                    <option value="皮肤科">皮肤科</option>
                </select>
                <select id="statusFilter" class="filter-select">
                    <option value="">所有状态</option>
                    <option value="活跃">活跃</option>
                    <option value="非活跃">非活跃</option>
                    <option value="待诊">待诊</option>
                    <option value="已出院">已出院</option>
                </select>
                <button class="btn btn-outline" id="exportBtn">
                    <span data-icon="export"></span>
                    导出
                </button>
            </div>
        </div>
        
        <!-- 患者表格 -->
        <div class="table-container">
            <table class="data-table">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="selectAll"></th>
                        <th>患者ID</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>联系电话</th>
                        <th>主治医生</th>
                        <th>科室</th>
                        <th>最近就诊</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="patientsTableBody">
                    <!-- 表格数据由JS动态生成 -->
                </tbody>
            </table>
        </div>
        
        <!-- 分页控件 -->
        <div class="pagination">
            <button class="btn-icon pagination-btn" disabled>
                <span data-icon="chevron-left"></span>
            </button>
            <button class="pagination-number active">1</button>
            <button class="pagination-number">2</button>
            <button class="pagination-number">3</button>
            <span class="pagination-ellipsis">...</span>
            <button class="pagination-number">10</button>
            <button class="btn-icon pagination-btn">
                <span data-icon="chevron-right"></span>
            </button>
        </div>
    </div>
    
    <!-- 添加患者模态框 -->
    <div class="modal" id="addPatientModal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>添加新患者</h2>
                <button class="close-btn">
                    <span data-icon="close"></span>
                </button>
            </div>
            <div class="modal-body">
                <form id="patientForm">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="patientName">姓名</label>
                            <input type="text" id="patientName" name="patientName" required>
                        </div>
                        <div class="form-group">
                            <label for="patientGender">性别</label>
                            <select id="patientGender" name="patientGender" required>
                                <option value="">请选择</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                                <option value="其他">其他</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="patientAge">年龄</label>
                            <input type="number" id="patientAge" name="patientAge" required min="0" max="120">
                        </div>
                        <div class="form-group">
                            <label for="patientPhone">联系电话</label>
                            <input type="tel" id="patientPhone" name="patientPhone" required>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="patientDoctor">主治医生</label>
                            <select id="patientDoctor" name="patientDoctor" required>
                                <option value="">请选择</option>
                                <option value="王医生">王医生</option>
                                <option value="李医生">李医生</option>
                                <option value="张医生">张医生</option>
                                <option value="赵医生">赵医生</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="patientDepartment">科室</label>
                            <select id="patientDepartment" name="patientDepartment" required>
                                <option value="">请选择</option>
                                <option value="内科">内科</option>
                                <option value="外科">外科</option>
                                <option value="儿科">儿科</option>
                                <option value="妇产科">妇产科</option>
                                <option value="神经科">神经科</option>
                                <option value="精神科">精神科</option>
                                <option value="皮肤科">皮肤科</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="patientAddress">地址</label>
                        <input type="text" id="patientAddress" name="patientAddress">
                    </div>
                    <div class="form-group">
                        <label for="patientNotes">备注</label>
                        <textarea id="patientNotes" name="patientNotes" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" id="cancelAddPatient">取消</button>
                <button class="btn btn-primary" id="savePatient">保存</button>
            </div>
        </div>
    </div>

    <!-- 页面特定脚本 -->
    <th:block th:fragment="pageScripts">
        <script th:src="@{/js/utils/modal.js}"></script>
        <script th:src="@{/js/pages/patients.js}"></script>
    </th:block>
</body>
</html> 